<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	request.setAttribute("path", request.getContextPath());
	request.setAttribute("jsPath", path+"/js");
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${path}/css/demo.css" type="text/css">
<link rel="stylesheet" href="${path}/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${path}/js/jquery.min.js"></script>
<script type="text/javascript" src="${path}/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="${path}/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="${path}/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript">
var setting = {
		edit: {
			enable: true,
			showRemoveBtn: false,
			showRenameBtn: false
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "functionid",
				pIdKey: "pId",
			}
		},
		callback: {
			beforeDrag: beforeDrag,
			beforeDrop: beforeDrop
		},
		check:{
			enable:true,
			chkboxType:{"Y":"s","N":"s"}
		},
		view:{
			showIcon:false
		}
	};

	var zNodes =[
		<c:forEach var="s" items="${functionlist}">
			{ functionid:${s.functionauthorityId}, pId:${s.parentId}, name:"${s.name}", open:true},
		</c:forEach>
	];

	function beforeDrag(treeId, treeNodes) {
		for (var i=0,l=treeNodes.length; i<l; i++) {
			if (treeNodes[i].drag === false) {
				return false;
			}
		}
		return true;
	}
	function beforeDrop(treeId, treeNodes, targetNode, moveType) {
		return targetNode ? targetNode.drop !== false : true;
	}
	
	function setCheck() {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
		isCopy = true,
		isMove = true,
		prev =true,
		inner = true,
		next =true;
		zTree.setting.edit.drag.isCopy = isCopy;
		zTree.setting.edit.drag.isMove = isMove;
		showCode(1, ['setting.edit.drag.isCopy = ' + isCopy, 'setting.edit.drag.isMove = ' + isMove]);

		zTree.setting.edit.drag.prev = prev;
		zTree.setting.edit.drag.inner = inner;
		zTree.setting.edit.drag.next = next;
		showCode(2, ['setting.edit.drag.prev = ' + prev, 'setting.edit.drag.inner = ' + inner, 'setting.edit.drag.next = ' + next]);
	}
	function showCode(id, str) {
		var code = $("#code" + id);
		code.empty();
		for (var i=0, l=str.length; i<l; i++) {
			code.append("<li>"+str[i]+"</li>");
		}
	}
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
 		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		<c:forEach var="r" items="${roleInfolist}">
			var node=treeObj.getNodeByParam("functionid",${r.functionauthorityId});
			treeObj.checkNode(node,true,true);
		</c:forEach>
		
		setCheck();
		$("#treeDemo_1_check").attr({name:"functionid",value:"5"});

		$("#copy").bind("change", setCheck);
		$("#move").bind("change", setCheck);
		$("#prev").bind("change", setCheck);
		$("#inner").bind("change", setCheck);
		$("#next").bind("change", setCheck);
	});
	
	function GetCheckedAll() {
		var rList = new Array();
		var fList = new Array();
		$("input[name=rid]").each(function() {
			alert($(this).val());
			rList.push($(this).val());
		});
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = treeObj.getCheckedNodes(true);
		for (var i = 0; i < nodes.length; i++) {
			alert(nodes[i].functionid)
			fList.push(nodes[i].functionid);
		}
		$.ajax({
			type : "post",
			url : "${path}/auth/role/add",
			dataType : "json",
			data :"rList="+rList+"&fList="+fList,  
			success : function(data) {
				alert("OK");
				window.location.href = "${path}/auth/sysrole/page";
			},
			error : function() {
				window.location.href = "${path}/auth/sysrole/page";
			}
		});
	}
</script>
</head>
<body>
		<form  id="sysfrom" action="${path}/auth/role/add" method="post">
		<div>
			<span>角色名称</span>
			<c:forEach var="sysroleList" items="${sysrolelist}">
				<input type="hidden" name="rid" value="${sysroleList.roleId }" />
					<span>${sysroleList.name}</span>
			</c:forEach>
		</div>

		<div class="content_wrap">
			<div class="zTreeDemoBackground left">
				<ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>
		<div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			<input type="button" value="增加" onclick="GetCheckedAll();"/>
		</div>
	</form>
</body>
</html>